import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {Image, Text, View} from '@tarojs/components'
import {AtIcon} from "taro-ui";
import {OUTLETS_DETAIL, RESOURCE_URL} from "../../constants/api"
import {http} from "../../utils/http";
import {GetRequest, vcmonitor} from "../../utils/tools";
import {lxH5Wx} from "../../utils/lx.h5.service";
import {h5Wx} from "../../utils/h5.service";
import './outletsDetail.scss'

type pageState = {
  info: any
}

export default class Index extends Component {

  state: pageState = {
    info: ''
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    vcmonitor(this)
    const info = await http.carGet(OUTLETS_DETAIL + Taro.getCurrentInstance().router.params.uuid, {})
    this.setState({info})
  }

  componentDidShow() {
    Taro.setNavigationBarTitle({title: '网点详情'})
  }

  previewImage = async (current) => {
    await Taro.previewImage({
      current,
      urls: this.state.info.photos
    })
  }

  makePhone(phone) {
    try {
      Taro.makePhoneCall({
        phoneNumber: phone
      })
    } catch (e) {
      Taro.showToast({title: '拨打电话失败', icon: 'none'})
    }
  }

  copy(data) {
    try {
      Taro.setClipboardData({
        data
      })
      Taro.showToast({title: '复制成功', icon: 'none'})
    } catch (e) {
      Taro.showToast({title: '复制失败', icon: 'none'})
    }
  }

  async navigateOut(info) {
    lxH5Wx.navigation(Number(info.latitude), Number(info.longitude), info.address)
  }

  render() {
    const {info} = this.state;
    return (
      <View className='outletsDetail'>
        <View className='outletsDetail-header-bg'
          style={`background: url(${RESOURCE_URL + '/upload/images/20220825/1661394969710_180.png'}) center bottom no-repeat; `}
        >
          <View className='bg-radius-wrapper'>
            <View className='infoName'>{info.name}</View>
          </View>
        </View>
        <View style='height: 8.5px' />
        <View className='radius-box'>
          <View className='radius-box-header'>
            <View className='left-line' />
            <View className='left-line-title'>营业时间</View>
          </View>
          <View className='car-detail-content'>{info.business_hours_start}-{info.business_hours_end}</View>
        </View>
        <View className='radius-box'>
          <View className='radius-box-header'>
            <View className='left-line' />
            <View className='left-line-title'>地址</View>
          </View>
          <View className='car-detail-content car-detail-content-no-left'>
            <View className='content-wrapper'>
              <View className='wd-address-title'>网点地址</View>
              <View className='wd-address' onClick={this.navigateOut.bind(this, info)}>
                <View className='info-address'>{info.address}</View>
                <Image className='address-img' src={`${RESOURCE_URL + '/upload/images/20220825/1661396171595_593.png'}`}
                  mode='widthFix'
                />
              </View>
              <View style='height: 5px' />
              <View className='photos'>
                {info && info.photos && info.photos.map((item, index) => <Image key={index} className='img' src={item} mode='widthFix' onClick={this.previewImage.bind(this, item)} />)}
              </View>
            </View>
          </View>
        </View>
        <View style='height: 90px' />
        <View className='fixed-car-footer'>
          <View className='footer-left'>
            网点电话：{info.phone}
            <AtIcon onClick={this.copy.bind(this, info.phone)} value='icon icon-fuzhi-01' size='16' customStyle='margin-left: 8px' color={`${process.env.mainColor}`} />
          </View>
          <View className='footer-right' onClick={this.makePhone.bind(this, info.phone)}>
            <AtIcon prefixClass='xxhz' value='phone' color='#333' size='16' />
            <Text className='btn-text'>电话</Text>
          </View>
        </View>
      </View>
    );
  }
}
